<template>
  <div class="hello">
    <div>
      <el-switch
        v-model="isDark"
        :active-icon="Moon"
        :inactive-icon="Sunny"
        inline-prompt
        @change="toggleDark"
      />
    </div>
    <el-button @click="changeBgc('rgb(78, 119, 143)')" :disabled="!isDark"
      >黑色色</el-button
    >
    <el-button @click="changeBgc('#ccc')" :disabled="!isDark">深灰色</el-button>
    <el-button @click="changeBgc('pink')" :disabled="!isDark">粉色</el-button>
    <div>测试文字测试文字测试文字</div>
  </div>
</template>
 
<script setup>
import { Sunny, Moon } from "@element-plus/icons-vue";
import { useDark, useToggle } from "@vueuse/core";
const props = defineProps({
  msg: String,
});
const isDark = useDark();

const toggleDark = useToggle(isDark);

function changeBgc(bgc) {
  let domStyle = document.documentElement.style;
  domStyle.setProperty("--zyl-bg-color", bgc);
}
</script>
 
<style scoped>
</style>